<template>
	<view class="container">
		<view class="content">
			<!-- 地址信息 -->
			<view class="address" @click="goAddress()">
				<view class="address-left">
					<image src="/static/icon/address.png"></image>
				</view>
				<view class="address-right">
					<view class="address-info">
						<view class="address-info-top">
							{{address.address || '请选择'}}
						</view>
						<view class="address-info-bottom">
							<text class="address-name">{{address.nickname}}</text>
							<text class="address-phone">{{address.phone}}</text>
						</view>
					</view>
					<view class="address-righticon">
						<image src="/static/icon/right.png"></image>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods">
				<view class="goods-info" v-for="(item,index) in goods" :key="item.id">
					<view class="logistics">
						<text class="logistics-left">生鲜快递发货</text>
						<text class="logistics-right">上架24H发货，第三方物流配送</text>
					</view>
					<view class="goods-item">
						<view class="goods-left">
							<image :src="item.product.post_url"></image>
						</view>
						<view class="goods-center">
							<text class="goods-name">{{item.product.title}}</text>
							<text class="goods-num">数量：{{item.count}} {{item.product.unit || ''}}</text>
						</view>
						<view class="goods-right">
							￥<text class="goods-price">{{item.product.price}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
<!--			<view class="coupon">-->
<!--				<view class="coupon-left">-->
<!--					优惠券-->
<!--				</view>-->
<!--				<view class="coupon-right">-->
<!--					<text>-￥10</text>-->
<!--					<image src="/static/icon/right.png"></image>-->
<!--				</view>-->
<!--			</view>-->

		</view>
		<!-- 底部栏 -->
		<view class="bottombar">
			<view class="bottombar-content">
				<text>共{{ goodsCount }}件，合计：</text>
				<text class="bottombar-label">￥<text class="bottombar-price">{{ amount.payment_amount }}</text></text>
				<button @click="submit()">提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: {
				},
				goods: [],
        discount: 0
			}
		},
    computed: {
      goodsCount() {
        let count = 0
        this.goods.forEach(item => {
          count += item.count
        })
        return count
      },
      amount() {
        // 减去折扣
        let amount = 0
        this.goods.forEach(item => {
          amount += item.count * item.product.price
        })
        // 计算精度
        return {
          amount,
          payment_amount: (amount - this.discount).toFixed(2)
        }
      },
    },
    onShow() {
      if (!this.$store.state.userInfo.id) {
        return
      }
      const defaultAddress = uni.getStorageSync('defaultAddress')
      if (defaultAddress) {
        this.address = defaultAddress || {}
      }
      if (!this.address.id) {
        this.$api.getAddressList({
          user_id: this.$store.state.userInfo.id
        }).then(res => {
          let _defaultAddress = res.rows.find(item => item.status === 1)
          if (_defaultAddress) {
            this.address = _defaultAddress ||  {}
          }
        })
      }
    },
    onLoad() {
      if (!this.$store.state.userInfo.id) {
        return
      }
      this.$api.getCartList({
        status: 1,
        user_id: this.$store.state.userInfo.id
      }).then(res => {
        this.goods = res.rows
      })
    },
		methods: {
			// 跳转地址管理页面
			goAddress() {
				uni.navigateTo({
					url: "/pages/address/address"
				})
			},
			// 提交订单
			submit() {
        this.$api.createOrder({
          address_id: this.address.id,
          address_detail: this.address.address,
          address_phone: this.address.phone,
          address_nickname: this.address.nickname,
          user_id: this.$store.state.userInfo.id,
          discount_amount: this.discount,
          discount_coupon_id: 0,
          delivery_fee_config_id: 0,
          delivery_amount: 0,
          amount: this.amount.amount,
          payment_amount: this.amount.payment_amount,
          payment_type: 'wxin',
          order_delivery: 'express',
          count: this.goodsCount,
          cartList: this.goods
        }).then(res => {
          this.getPay(res)
        })
			},
      getPay(order_id){
        uni.showLoading({
          title:'微信支付请求'
        });
        const that = this
        this.$api.createPay({
          order_id
        }).then(payment =>{
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: payment.timestamp,
            nonceStr: payment.nonce_str,
            package: payment.package,
            signType: payment.signType,
            paySign: payment.paySign,
            success:(result)=> {
              uni.showToast({
                title:'支付成功'
              });
            },
            fail: (result) => {
              uni.showToast({
                icon:'none',
                title:'支付失败',
              });
            },
            complete: () => {
              setTimeout(() => {
                uni.redirectTo({
                  url: "/pages/cart/paymentinfo?orderId=" + order_id
                })
              }, 1000);
            }
          });
        }).catch(res=>{
          this.loading = false;
          setTimeout(() => {
            uni.redirectTo({
              url: "/pages/cart/paymentinfo?orderId=" + order_id
            })
          }, 1000);
        })
      },
		}
	}
</script>

<style>
	page {
		background: #F8F9FA;
	}
</style>

<style lang="scss" scoped>
	.content {
		margin: 20rpx 30rpx;
    padding-bottom: 50rpx;
	}

	.address {
		display: flex;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 20rpx;

		.address-left {

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.address-right {
      flex-grow: 1;
			display: flex;
			align-items: center;

			.address-info {
        flex-grow: 1;
				display: flex;
				flex-direction: column;
				padding: 0rpx 40rpx 0rpx 20rpx;

				.address-info-top {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
				}

				.address-info-bottom {
					font-size: 24rpx;
					color: #999999;
					margin-top: 6rpx;

					.address-phone {
						margin-left: 16rpx;
					}
				}
			}

			.address-righticon {

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.goods {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 22rpx;
		display: flex;
		flex-direction: column;
		gap: 44rpx;

		.logistics {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			padding-bottom: 30rpx;

			.logistics-left {
				font-weight: 600;
			}

			.logistics-right {
				color: #40AE36;
			}
		}

		.goods-item {
			display: flex;
			padding: 10rpx 0rpx;

			.goods-left {

				image {
					width: 130rpx;
					height: 130rpx;
				}
			}

			.goods-center {
        flex-grow: 1;
				display: flex;
				flex-direction: column;
				padding: 0rpx 60rpx 0rpx 30rpx;

				.goods-name {
					font-size: 26rpx;
					font-weight: 600;
					color: #333333;
				}

				.goods-spec {
					font-size: 22rpx;
					color: #999999;
					margin-top: 10rpx;
				}

				.goods-num {
					font-size: 22rpx;
					color: #999999;
				}
			}

			.goods-right {
				font-size: 22rpx;
				font-weight: 600;

				.goods-price {
					font-size: 32rpx;
					color: #333333;
				}
			}

		}
	}

	.coupon {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 22rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.coupon-left {
			font-size: 30rpx;
		}

		.coupon-right {
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #F55726;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.bottombar {
		position: fixed;
		bottom: 50rpx;
		width: 100%;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;

		.bottombar-content {
			padding: 16rpx 30rpx 20rpx 16rpx;
			display: flex;
			align-items: center;
			text-align: right;

			text {
				color: #333333;
				font-size: 24rpx;
			}

			.bottombar-label {
				font-size: 22rpx;
				color: #F55726;
			}

			.bottombar-price {
				font-size: 32rpx;
				font-weight: 600;
				color: #F55726;
				margin-right: 28rpx;
			}

		}

		button {
			border-radius: 36rpx;
			background: #40AE36;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
</style>
